<template>
  <a-layout-sider
    breakpoint="lg"
    collapsed-width="0"
    class="sider-bar"
    :width="218"
    style="background: #2776ff; height: 100vh"
  >
    <div class="sider-header">
      <div class="logo">
        <!-- <img src="@/assets/logo.png" class="logo-img" /> -->
        <img :src="'./data/index-logo.png'" class="logo-img" />
        <span class="logo-text">伏羲東方</span>
      </div>
    </div>
    <div class="sider-menu">
      <template v-for="(menu, index) in menuList" :key="index">
        <div class="menu-box" v-if="menu.children">
          <div
            class="menu-sub-title"
            @click="handleToggle(menu)"
            v-if="menu.isMenu"
          >
            <span class="sub-title">{{ menu.title }}</span>
            <span class="icon-arrow" :class="{ open: menu.isOpen }"></span>
          </div>
          <div class="menu-list" v-if="menu.isOpen">
            <template v-for="(item, key) in menu.children" :key="key">
              <div
                class="menu-item"
                v-if="item.isMenu"
                :class="{ 'menu-item-cur': item.isCur }"
                @click="handleTo(item)"
              >
                <div class="icon">
                  <img :src="item.curIcon" v-if="item.isCur" alt="" />
                  <img :src="item.icon" v-else alt="" />
                </div>
                <span class="menu-text">{{ item.title }}</span>
              </div>
            </template>
          </div>
        </div>
        <div class="menu-list" v-else>
          <div
            class="menu-item"
            :class="{ 'menu-item-cur': menu.isCur }"
            @click="handleTo(menu)"
          >
            <div class="icon">
              <img :src="menu.curIcon" v-if="menu.isCur" alt="" />
              <img :src="menu.icon" v-else alt="" />
            </div>
            <span class="menu-text">{{ menu.title }}</span>
          </div>
        </div>
      </template>
    </div>
  </a-layout-sider>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "@/store/modules/global";
import { useRoleStore } from "@/store/modules/roles";
const store = useGlobalStore();
const roleStore = useRoleStore();
const router = useRouter();
const menuList: any = ref(roleStore.menuList);

const handleTo = (item: any) => {
  if (item.path) {
    store.clearSubTitle();
    store.setTile(item.title);
    router.push(item.path);
  }
};
const handleToggle = (item: any) => {
  if (item.hasChildren) {
    item.isOpen = !item.isOpen;
  }
};
watch(
  () => router.currentRoute.value,
  (newPath) => {
    console.log(222,newPath)
    menuList.value.forEach((item: any) => {
      if (item.children) {
        item.children.forEach((childItem: any) => {
          if (newPath.meta.label === childItem.label) {
            childItem.isCur = true;
            store.setTile(newPath.meta.title);
          } else {
            childItem.isCur = false;
          }
        });
      } else {
        if (newPath.meta.label === item.label) {
          item.isCur = true;
          store.setTile(newPath.meta.title);
        } else {
          item.isCur = false;
        }
      }
    });
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style lang="less" scoped>
.sider-bar {
  background: url(@/assets/sider-bg.png) no-repeat top center;
  background-size: 100% auto;
  height: 100%;
  /deep/.ant-layout-sider-children {
    overflow-y: auto;
  }
  .sider-header {
    padding: 0 16px;
    .logo {
      display: flex;
      align-items: center;
      width: 186px;
      height: 66px;
      border-bottom: 1px solid #ffffff26;
      .logo-img {
        width: 38px;
        margin-right: 12px;
      }
      .logo-text {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 24px;
      }
    }
  }
  .sider-menu {
    padding: 4px 16px;
    height: calc(100% - 76px);
    .menu-box {
      margin-top: 16px;
      .menu-sub-title {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: space-between;
        .sub-title {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          letter-spacing: 0;
        }
        .icon-arrow {
          background: url(@/assets/icon-arrow.png) no-repeat center;
          width: 12px;
          height: 12px;
          transition: all 0.3s;
          transform: rotate(180deg);
          &.open {
            transform: rotate(0deg);
          }
        }
      }
    }
    .menu-list {
      width: 186px;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      margin-top: 12px;
      .menu-item {
        padding: 12px 10px;
        display: flex;
        min-height: 48px;
        align-items: center;
        cursor: pointer;
        &.menu-item-cur {
          background: #ffffff;
          border-radius: 8px;
          .menu-text {
            color: #2776ff;
          }
        }
        .icon {
          width: 30px;
          height: 30px;
          margin-right: 8px;
          flex-shrink: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .menu-text {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          letter-spacing: 0;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
